<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="tableBody">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
                    </span>
                    <h3 class="card-label"> 查询区域 </h3>
                </div>
                <div class="card-toolbar">
                    <div class="example-tools justify-content-center">
                        <!-- 
                <span data-toggle="tooltip" class="example-toggle"></span>
                <span data-toggle="tooltip" class="example-copy"></span> 
              -->
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!--查询条件-->
                <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                    <div class="m-portlet__body">
                    </div>
                    <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                        <div class="m-form__actions m-form__actions--solid">
                            <div class="row">
                                <div class="col m--align-left">                                    
                                    <button class="btn btn-light-primary font-weight-bold mr-2" @click="defaultStartXtQuartzSet">
                                        <span><i class="flaticon-interface-6"></i><span>启动全部</span></span>
                                    </button>
                                </div>
                                <div class="col m--align-right">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--分页组件-->
            <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row
                :data="dataList">
                <!-- 复选框 -->
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column label="序号" min-width="50">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="jobName" show-overflow-tooltip label="任务名称" min-width="100"></el-table-column>
                <el-table-column align="left" prop="jobGroup" show-overflow-tooltip label="任务分组" min-width="350"></el-table-column>                
                <el-table-column align="left" prop="jobStatus" show-overflow-tooltip label="任务状态" min-width="150">
                    <template slot-scope="scope">
                        <div v-if="scope.row.jobStatus == 'NORMAL'">
                            <b-badge class="mr-1" variant="primary">启动</b-badge>
                        </div>
                        <div v-else-if="scope.row.jobStatus == 'PAUSED'">
                            <b-badge class="mr-1" variant="warning">暂停</b-badge>
                        </div>
                        <div v-else>
                            <b-badge class="mr-1" variant="secondary">未知</b-badge>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="cronExpression"  label="运行时间表达式" min-width="150"></el-table-column>
                <el-table-column align="center" prop="desc_"  label="任务描述" min-width="150"></el-table-column>
                <el-table-column align="center" label="操作" fixed="right" min-width="300">
                    <template slot-scope="scope">
                        <!--scope.row当前行的对象-->
                        <a href="javascript:;" @click="doStopXtQuartz(scope.row)" class="btn btn-sm btn-clean btn-icon"
                            title="暂停">
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"/>
                                        <path d="M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,
                                        6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z M12,20 C16.418278,20 20,16.418278 20,
                                        12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,
                                        20 Z M19.0710678,4.92893219 L19.0710678,4.92893219 C19.4615921,5.31945648 19.4615921,
                                        5.95262146 19.0710678,6.34314575 L6.34314575,19.0710678 C5.95262146,19.4615921 5.31945648,
                                        19.4615921 4.92893219,19.0710678 L4.92893219,19.0710678 C4.5384079,18.6805435 4.5384079,
                                        18.0473785 4.92893219,17.6568542 L17.6568542,4.92893219 C18.0473785,4.5384079 18.6805435,
                                        4.5384079 19.0710678,4.92893219 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    </g>
                                </svg>
                            </span>
                        </a>

                        <a href="javascript:;" @click="reStartXtQuartz(scope.row)" class="btn btn-sm btn-clean btn-icon"
                            title="恢复">
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">	                                    
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">	                                        
                                        <rect x="0" y="0" width="24" height="24"></rect>	                                        
                                        <path d="M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,4.89581508 L10.965708,
                                            2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,2.41308426 L15.5337377,4.77566479 C15.8314604,
                                            5.0588212 16,5.45170806 16,5.86258077 L16,17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,
                                            19.4148182 C8.67157288,19.4148182 8,18.7432453 8,17.9148182 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) ">
                                        </path>	                                        
                                        <rect fill="#000000" opacity="0.3" x="5" y="20" width="15" height="2" rx="1"></rect>	                                    
                                    </g>	                                
                                </svg> 
                            </span>
                        </a>

                        <a href="javascript:;" @click="delXtQuartz(scope.row)" class="btn btn-sm btn-clean btn-icon"
                            title="删除">
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">	                                    
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">	                                       
                                        <rect x="0" y="0" width="24" height="24"></rect>	                                        
                                        <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" 
                                        fill="#000000" fill-rule="nonzero"></path>	                                        
                                        <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,
                                            4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,
                                            6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3">
                                        </path>	                                    
                                    </g>	                                
                                </svg>	 
                            </span>
                        </a>

                        <a href="javascript:;" @click="startXtQuartz(scope.row)" class="btn btn-sm btn-clean btn-icon"
                            title="执行">
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"/>
                                        <path d="M7.14319965,19.3575259 C7.67122143,19.7615175 8.25104409,20.1012165 8.87097532,
                                        20.3649307 L7.89205065,22.0604779 C7.61590828,22.5387706 7.00431787,22.7026457 6.52602525,
                                        22.4265033 C6.04773263,22.150361 5.88385747,21.5387706 6.15999985,21.0604779 L7.14319965,
                                        19.3575259 Z M15.1367085,20.3616573 C15.756345,20.0972995 16.3358198,19.7569961 16.8634386,
                                        19.3524415 L17.8320512,21.0301278 C18.1081936,21.5084204 17.9443184,22.1200108 17.4660258,
                                        22.3961532 C16.9877332,22.6722956 16.3761428,22.5084204 16.1000004,22.0301278 L15.1367085,
                                        20.3616573 Z" fill="#000000"/>
                                        <path d="M12,21 C7.581722,21 4,17.418278 4,13 C4,8.581722 7.581722,5 12,5 C16.418278,5 20,
                                        8.581722 20,13 C20,17.418278 16.418278,21 12,21 Z M19.068812,3.25407593 L20.8181344,
                                        5.00339833 C21.4039208,5.58918477 21.4039208,6.53893224 20.8181344,7.12471868 C20.2323479,
                                        7.71050512 19.2826005,7.71050512 18.696814,7.12471868 L16.9474916,5.37539627 C16.3617052,
                                        4.78960984 16.3617052,3.83986237 16.9474916,3.25407593 C17.5332781,2.66828949 18.4830255,
                                        2.66828949 19.068812,3.25407593 Z M5.29862906,2.88207799 C5.8844155,2.29629155 6.83416297,
                                        2.29629155 7.41994941,2.88207799 C8.00573585,3.46786443 8.00573585,4.4176119 7.41994941,
                                        5.00339833 L5.29862906,7.12471868 C4.71284263,7.71050512 3.76309516,7.71050512 3.17730872,
                                        7.12471868 C2.59152228,6.53893224 2.59152228,5.58918477 3.17730872,5.00339833 L5.29862906,
                                        2.88207799 Z" fill="#000000" opacity="0.3"/>
                                        <path d="M11.9630156,7.5 L12.0475062,7.5 C12.3043819,7.5 12.5194647,7.69464724 12.5450248,
                                        7.95024814 L13,12.5 L16.2480695,14.3560397 C16.403857,14.4450611 16.5,14.6107328 16.5,
                                        14.7901613 L16.5,15 C16.5,15.2109164 16.3290185,15.3818979 16.1181021,15.3818979 C16.0841582,
                                        15.3818979 16.0503659,15.3773725 16.0176181,15.3684413 L11.3986612,14.1087258 C11.1672824,
                                        14.0456225 11.0132986,13.8271186 11.0316926,13.5879956 L11.4644883,7.96165175 C11.4845267,
                                        7.70115317 11.7017474,7.5 11.9630156,7.5 Z" fill="#000000"/>
                                    </g>
                                </svg>
                            </span>
                        </a>

                        <a href="javascript:;" @click="oneSecondXtQuartz(scope.row)" class="btn btn-sm btn-clean btn-icon"
                            title="一秒一次">
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"/>
                                        <path d="M12,2 C12.5522847,2 13,2.44771525 13,3 L13,11 C13,11.5522847 12.5522847,12 12,12 C11.4477153,12 11,11.5522847 11,11 L11,3 C11,2.44771525 11.4477153,2 12,2 Z" fill="#000000" opacity="0.3"/>
                                        <path d="M8.12601749,19 L15.8739825,19 C15.4299397,20.7252272 13.8638394,22 12,22 C10.1361606,22 8.57006028,20.7252272 8.12601749,19 Z" fill="#000000" opacity="0.3"/>
                                        <path d="M12,8 L12,8 C16.9705627,8 21,12.0294373 21,17 L3,17 L3,17 C3,12.0294373 7.02943725,8 12,8 Z" fill="#000000"/>
                                    </g>
                                </svg>
                            </span>
                        </a>

                        <a href="javascript:;" @click="fiveSecondsXtQuartz(scope.row)" class="btn btn-sm btn-clean btn-icon"
                            title="五秒一次">
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"/>
                                        <path d="M9,8 C8.44771525,8 8,8.44771525 8,9 L8,15 C8,15.5522847 8.44771525,16 9,
                                        16 L15,16 C15.5522847,16 16,15.5522847 16,15 L16,9 C16,8.44771525 15.5522847,8 15,8 L9,8 Z M9,6 L15,6 C16.6568542,6 18,7.34314575 18,9 L18,15 C18,16.6568542 16.6568542,18 15,18 L9,18 C7.34314575,18 6,16.6568542 6,15 L6,9 C6,7.34314575 7.34314575,6 9,6 Z" fill="#000000" fill-rule="nonzero"/>
                                        <path d="M9,8 C8.44771525,8 8,8.44771525 8,9 L8,15 C8,15.5522847 8.44771525,16 9,16 L15,
                                        16 C15.5522847,16 16,15.5522847 16,15 L16,9 C16,8.44771525 15.5522847,8 15,8 L9,8 Z" fill="#000000" opacity="0.3"/>
                                        <path d="M9,18 L15,18 L15,20.5 C15,21.3284271 14.3284271,22 13.5,22 L10.5,22 C9.67157288,22 9,21.3284271 9,20.5 L9,18 Z" fill="#000000" opacity="0.3"/>
                                        <path d="M10.5,2 L13.5,2 C14.3284271,2 15,2.67157288 15,3.5 L15,6 L9,6 L9,3.5 C9,2.67157288 9.67157288,2 10.5,2 Z" fill="#000000" opacity="0.3"/>
                                    </g>
                                </svg>
                            </span>
                        </a>                        
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNo" :page-sizes="[5, 10, 30, 50]" :page-size="pageSize"
                    layout="->,total, sizes, prev, pager, next, jumper" :total="totalCount">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            searchForm: {},
            pickerOptions: {
                // disabledDate(time) {//范围不可选
                //     return time.getTime() > Date.now();
                // },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, 
                {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, 
                {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }],
            },
            dataList: [],
            sels: [], //当前选框选中的值
            pageNo: 1,      // 默认当前是第一页
            pageSize: 5,    // 当前每页的数据是5条
            totalCount: 0   // 总数默认为0
        }
    },
    components: {
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "执行任务" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
    },
    methods: {
        initList() {
            showWating({ renderBody: "tableBody" });
            var params = {};
            params.usePageNo = true;//采用第几页进行分页（兼容）
            params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
            params.pageNo = this.pageNo;//开始的记录序号   
            params.searchJson = JSON.stringify(this.searchForm);//为form元素     
            apiUtil.queryPage(process.env.VUE_APP_JOB_API + "/xtQuartzSet/list", params).then(({ data }) => {
                this.dataList = data.data;//给结果集赋值
                this.totalCount = data.total;// 获取当前数据的总数    
            });
        },

        handleSelectionChange(sels) {//获取选中的值
            this.sels = sels;
        },
        defaultStartXtQuartzSet() { 
            this.$confirm("确认启动所有调度任务?", "提示", { type: "warning", }).then(() => {
                // 根据后台想要的参数格式选择
                apiUtil.get(process.env.VUE_APP_JOB_API + "/xtQuartzSet/default/start").then(data => {
                    if (data.data.success) {
                        handleAlert("启动成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("启动失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;        
        },
        handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
            this.pageSize = val;  // 修改页的大小
            this.initList();       // 按新的pageNo和pageSize进行查询
        },
        handleCurrentChange(val) { // 修改当前页所触发的函数
            this.pageNo = val;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        search() {
            this.pageNo = 1;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        resetAll() {
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
            this.search();
        },
        doStopXtQuartz(row){//暂停
            this.$confirm("确定暂停该任务?", "提示", { type: "warning", }).then(() => {
                let params = {jobGroup:row.jobGroup,jobName:row.jobName};
                apiUtil.get(process.env.VUE_APP_JOB_API + "/xtQuartzSet/stop",params).then(data => {
                    if (data.data.success) {
                        handleAlert("暂停成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("状态失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;      
        },
        reStartXtQuartz(row){
            this.$confirm("确定重启该任务?", "提示", { type: "warning", }).then(() => {
                let params = {jobGroup:row.jobGroup,jobName:row.jobName};
                apiUtil.get(process.env.VUE_APP_JOB_API + "/xtQuartzSet/restart",params).then(data => {
                    if (data.data.success) {
                        handleAlert("重启成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("重启失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;   
        },
        delXtQuartz(row){            
            this.$confirm("确定删除该任务?", "提示", { type: "warning", }).then(() => {
                let params = {jobGroup:row.jobGroup,jobName:row.jobName};
                apiUtil.delete(process.env.VUE_APP_JOB_API + "/xtQuartzSet/delete",params).then(data => {
                    if (data.data.success) {
                        handleAlert("删除成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("删除失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;   
        },        
        startXtQuartz(row){
            this.$confirm("确定要立即执行一次该任务?", "提示", { type: "warning", }).then(() => {
                let params = {jobGroup:row.jobGroup,jobName:row.jobName};
                apiUtil.get(process.env.VUE_APP_JOB_API + "/xtQuartzSet/start",params).then(data => {
                    if (data.data.success) {
                        handleAlert("执行成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("执行失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;  
        },
        oneSecondXtQuartz(row){
            this.$confirm("确定要一秒执行一次该任务?", "提示", { type: "warning", }).then(() => {
                let params = {jobGroup:row.jobGroup,jobName:row.jobName};
                apiUtil.get(process.env.VUE_APP_JOB_API + "/xtQuartzSet/onesecond",params).then(data => {
                    if (data.data.success) {
                        handleAlert("执行成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("执行失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;  
        },
        fiveSecondsXtQuartz(row){
            this.$confirm("确定要五秒执行一次该任务?", "提示", { type: "warning", }).then(() => {
                let params = {jobGroup:row.jobGroup,jobName:row.jobName};
                apiUtil.get(process.env.VUE_APP_JOB_API + "/xtQuartzSet/fiveseconds",params).then(data => {
                    if (data.data.success) {
                        handleAlert("执行成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("执行失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;  
        }
    }
};
</script>